<template>
    <el-select
      v-model="value"
      @change="changeValue"
      clearable
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </template>
  
  <script>
    import {findAll} from "@/api/roles.js";
    export default {
      props: ['checked'], //自定义属性
      data() {
        return {
          options: [],
          value: "",
        };
      },
      // 钩子函数 渲染出来的时候，请求后台查询数据
      created() {
        findAll()
          .then((res) => {
            console.log(res);
            this.options = res.data;
          })
          .catch();
      },
      methods: {
        changeValue() {
          console.log(this.value);
          //把改变后的角色id传回去
          this.$emit('changeRole',this.value)
        },
      },
      // 计算属性
      computed:{
  
      },
      //监听:有个前提条件(默认情况)，必须新旧值发生变化，才能触发！
      watch:{
        checked:{
          handler(newValue,oldValue){
            console.log(newValue,'新---旧',oldValue);
            this.value = newValue;
          },
          //这个设置 可以让第一次点击，也触发这个监听事件
          immediate:true
        }
      }
    };
  </script>